/*
 * @Author: quit
 * @Date: 2023-02-24 18:39:32
 * @LastEditTime: 2023-02-28 14:30:39
 * @Descripttion:
 * 1.给state添加一个状态,作为表单元素的Value值
 * 2.给表单绑定Value,并给表单绑定一个change事件,并且将最新值赋值给value值
 * @notice:
 */
import React from 'react'

class controlledComponent extends React.Component {
    state = {
        txt: '',
        content: '',
        city: 'gz',
        isChecked: false
    }

    // handleChangeTextarea = e => {
    //     this.setState({ content: e.target.value })
    // }

    // handleChangeCity = e => {
    //     this.setState({ city: e.target.value })
    // }

    // handleChecked = e => {
    //     this.setState({ isChecked: e.target.checked })
    // }

    handleChangeForm = e => {
        const { target, name } = e.target
        const value = e.target.type === 'checkbox' ? target.checked : target.value
        this.setState({ [name]: value })
        console.log(name, value)
    }

    render() {
        return (
            <div>
                <input type="text" name="txt" value={this.state.txt} onChange={this.handleChangeForm} />
                <br />
                <textarea cols="30" name="content" rows="10" value={this.state.content} onChange={this.handleChangeForm}></textarea>
                <br />
                <select name="city" value={this.state.city} onChange={this.handleChangeForm}>
                    <option value="sh"> 上海 </option>
                    <option value="bj"> 北京 </option>
                    <option value="gz"> 广州 </option>
                </select>
                <br />
                <input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.handleChangeForm} />
            </div>
        )
    }
}

export default controlledComponent

/**
 * 多个表单元素在进行处理时函数创建过多,需要进行优化处理
 * 1. 可以给表单元素添加一个Name属性,该属性保持与state中的值一致
 * |-- <input type="text" name="txt" value={this.state.txt} onChange={e => this.setState({ txt: e.target.value })} />
 * 2. 根据表单类型获取对应值
 * 3. 在onchange事件中通过 name 修改对应state值
 */
